<!--
 * @Author: your name
 * @Date: 2021-12-01 20:35:49
 * @LastEditTime: 2021-12-01 22:10:52
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \前端学习\code\网易新闻列表.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <style>
        body {
            background-color: yellowgreen;
        }

        .new-list {
            width: 300px;
            margin: 10px auto;
            padding: 10px;
            background-color: white;
        }

        a {
            text-decoration: none;
        }

        .news-title {
            height: 42px;
            line-height: 42px;
        }

        .news-title a {
            color: black;
            font-size: 16px;
            font-style: bold;
        }

        .new-img {
            height: 90px;
        }

        .subtitle span {
            display: inline-block;
            width: 55px;
            height: 40px;
            background-color: #f34540;
            line-height: 40px;
            font-size: 14px;
            color: white;
            text-align: center;
        }

        .subtitle strong {

            width: 245px;
            height: 40px;
            line-height: 40px;
        }

        .subtitle strong a {
            color: #404040;
            font-size: 16px;
        }

        .ul-list {
            width: 300px;
            height: 120px;
        }

        .li-item {

            position: relative;
            padding: 0px 0px 0px 15px;
            width: 300px;
            height: 30px;
            line-height: 30px;
            list-style-type: square;
            font-family: 宋体;
            overflow: hidden;
        }

        .li-item a {
            color: #666666;
            font-size: 14px;
        }

        .li-item a:hover {
            color: red;
        }

        .subtitle strong a:hover {
            color: red;
        }

        .ul-list li::before {
            content: '.';
        }

        #img1:hover {
            transform: scale(1.055);
            transition: all 1s ease 0s;
        }
    </style>
</head>

<body>
    <div class="new-list">
        <h2 class="news-title">
            <a href="#">新闻专题</a>
        </h2>
        <div class="new-image">
            <a href="#">
                <img id="img1" src="./img/news.jpg">
            </a>
        </div>
        <div class="subtitle">
            <span>HOT</span>
            <strong>
                <a href="#">2022年北京冬奥会</a>
            </strong>
        </div>
        <ul class="ul-list">
            <li class="li-item"><a href="#">十九届六中全会在京召开</a></li>
            <li class="li-item"><a href="#">下半年最强寒潮来了！</a></li>
            <li class="li-item"><a href="#">省级大员人事密集调整</a></li>
            <li class="li-item"><a href="#">神十三航天员完成出舱任务</a></li>

        </ul>
    </div>
</body>

</html>